<template>
  <guat-page-layout :title>
    <template #actions>
      <guat-button-group :buttons />
    </template>
    <a-card :bordered="false">
      <a-descriptions size="large" bordered title="补录申请信息" :column="2">
        <a-descriptions-item label="标题" :span="2">
          {{ record[MUPM.Title] }}
        </a-descriptions-item>
        <a-descriptions-item label="活动名称">
          {{ record[MUPM.ActivityName] }}
        </a-descriptions-item>
        <a-descriptions-item label="当前状态">
          <ATag :color="color[record[MUPM.Status]]">
            {{ MURS[record[MUPM.Status] as 0] }}
          </ATag>
        </a-descriptions-item>
        <a-descriptions-item label="申请人">
          {{ record[MUPM.Applicant][MPM.Name] }}
        </a-descriptions-item>
        <a-descriptions-item label="申请积分">
          {{ record[MUPM.ApplyPoint] }}分
        </a-descriptions-item>
        <a-descriptions-item label="所获奖项">
          {{ record[MUPM.Award] }}
        </a-descriptions-item>
        <a-descriptions-item label="申请理由" :span="2">
          {{ record[MUPM.ApplyReason] }}
        </a-descriptions-item>
        <a-descriptions-item label="申请附件" :span="2">
          <div class="text-sm pt-[2px] mb-2 text-tc-3">点击查看图片</div>
          <a-image-preview-group infinite>
            <a-space :size="[16, 16]">
              <a-image
                v-for="image in record[MUPM.ApplyAttachment]"
                :src="image"
                :width="138"
                :height="138"
                style="cursor: pointer"
              />
            </a-space>
          </a-image-preview-group>
        </a-descriptions-item>
      </a-descriptions>
    </a-card>
    <a-card :bordered="false">
      <a-descriptions size="large" bordered title="审核信息" :column="2">
        <a-descriptions-item label="审核人"> <ATag>admin</ATag> </a-descriptions-item>
        <a-descriptions-item label="审核时间"> 2023-04-10 23:23:45 </a-descriptions-item>
        <a-descriptions-item label="驳回理由"> {{ record[MUPM.ApplyReason] }} </a-descriptions-item>
      </a-descriptions>
    </a-card>
  </guat-page-layout>
</template>

<script setup lang="ts">
import { MakeUpPropertyMap as MUPM } from "@/map/make-up/property-map";
import { MemberPropertyMap as MPM } from "@/map/member/property-map";
import { MakeUpRecordStatus as MURS } from "@/constant/dictionary";
import { ButtonInternalStyle as BIS } from "@/config/internal-style";
import { ButtonType } from "@/components/GuatButtonGroup/types";

const router = useRouter();
const color = {
  [MURS.UNAUDITED]: "purple",
  [MURS.PASSED]: "green",
  [MURS.UNPASSED]: "red",
};
const scene = computed(() => {
  const lastIndex = router.currentRoute.value.path.lastIndexOf("/");
  return router.currentRoute.value.path.substring(lastIndex + 1);
});
const buttons = computed(() => {
  const { back, pass, reject, whd }: Record<"back" | "pass" | "reject" | "whd", ButtonType> = {
    back: { internal: BIS.PLO, text: "返回", onClick: router.back },
    pass: { internal: BIS.PLR, text: "通过", onClick: handleOnPass },
    reject: { internal: BIS.RLR, text: "驳回", onClick: handleOnReject },
    whd: { internal: BIS.RLR, text: "撤回", onClick: handleOnWithdraw },
  };
  const isPassed = record[MUPM.Status] == MURS.PASSED;
  if (unref(scene) == "audit") {
    return [back, pass, reject];
  } else if (isPassed) {
    return [back, whd];
  } else return [back];
});
const title = computed(() => {
  return `${scene.value == "check" ? "查看" : "审核"}补录申请`;
});

function handleOnPass() {}

function handleOnReject() {}

function handleOnWithdraw() {}

const record = {
  id: "748125748719542864",
  title: "2022年第五届广西大学生程序设计大赛积分补录申请",
  applyTime: "2023年4月10日 00:00:00",
  applicant: {
    id: "2153781",
    userName: "admin",
    userAvatar: "",
  },
  applyPoint: 8,
  auditor: {
    id: "2153781",
    userName: "admin",
    userAvatar: "",
  },
  auditTime: "2023年4月10日 00:00:00",
  status: 1,
  applyReason:
    "司马光，字君实，号迂叟，陕州夏县涑水乡人，《宋史》，《辞海》等明确记载，世称涑水先生。生于河南省信阳市光山县。北宋史学家、文学家。历仕仁宗、英宗、神宗、哲宗四朝，卒赠太师、温国公，谥文正，主持编纂了中国历史上第一部编年体通史《资治通鉴》，为人温良谦恭、刚正不阿，其人格堪称儒学教化下的典范，历来受人景仰。生平著作甚多，主要有史学巨著《资治通鉴》、《温国文正司马公文集》、《稽古录》、《涑水记闻》、《潜虚》等。",
  applyAttachment: [
    "https://p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/cd7a1aaea8e1c5e3d26fe2591e561798.png~tplv-uwbnlip3yd-webp.webp",
    "https://p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/cd7a1aaea8e1c5e3d26fe2591e561798.png~tplv-uwbnlip3yd-webp.webp",
    "https://p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/6480dbc69be1b5de95010289787d64f1.png~tplv-uwbnlip3yd-webp.webp",
    "https://p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/0265a04fddbd77a19602a15d9d55d797.png~tplv-uwbnlip3yd-webp.webp",
    "https://p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/24e0dd27418d2291b65db1b21aa62254.png~tplv-uwbnlip3yd-webp.webp",
  ],
  avtivityName: "广西大学生程序设计大赛",
  award: "一等奖",
};
</script>

<style scoped></style>
